<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.userName"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入用户名称"
      />
      <el-date-picker
        v-model="listQuery.beginDate"
        class="filter-item"
        type="datetime"
        placeholder="起始日期"
        value-format="yyyy-MM-dd hh:mm"
        clearable
      />
      <el-date-picker
        v-model="listQuery.endDate"
        class="filter-item"
        type="datetime"
        placeholder="截止日期"
        format="yyyy-MM-dd hh:mm"
        value-format="yyyy-MM-dd hh:mm"
        clearable
      />
      <el-select
        v-model="listQuery.storeId"
        placeholder="请选择门店"
        class="filter-item"
        clearable
      >
        <el-option
          v-for="item in storeOptions"
          :key="item.storeId"
          :label="item.storeName"
          :value="item.storeId"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >查找</el-button
      >
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" width="50" label="ID" prop="id" />
      <el-table-column align="center" label="姓名" prop="userName" />
      <el-table-column align="center" label="年龄" prop="userAge" width="80" />
      <el-table-column align="center" label="预约门店" prop="storeName" />
      <el-table-column
        align="center"
        label="预约时间"
        prop="appointmentTime"
        width="150"
      />
      <el-table-column
        align="center"
        label="创建时间"
        prop="created"
        width="170"
      />
      <el-table-column
        align="center"
        label="预约状态"
        prop="contactStatus"
        width="170"
      >
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.contactStatus != 1"
            >未联系</el-tag
          >
          <el-tag type="success" v-else>已联系</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" prop="status" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="sureContact(scope.row, 1)"
            v-if="scope.row.contactStatus != 1"
            >确认联系</el-button
          >
          <el-button type="primary" size="mini" @click="getDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
    <el-dialog :title="预约详情" :visible.sync="dialogFormVisible">
      <el-form
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="姓名">{{ dataForm.userName }}</el-form-item>
        <el-form-item label="年龄">{{ dataForm.userAge }}</el-form-item>
        <el-form-item label="电话">{{ dataForm.contact }}</el-form-item>
        <el-form-item label="预约门店">{{ dataForm.storeName }}</el-form-item>
        <el-form-item label="创建时间">{{ dataForm.created }}</el-form-item>
        <el-form-item label="预约时间">{{
          dataForm.appointmentTime
        }}</el-form-item>
        <el-form-item label="预约时间">
          <el-tag type="danger" v-if="!dataForm.status">未联系</el-tag>
          <el-tag type="success" v-else>已联系</el-tag></el-form-item
        >
      </el-form>
      <div v-if="!disabled" slot="footer" class="dialog-footer">
        <el-button @click="sureContact(dataForm, 2)">确认联系</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAppointment, sureCourseContact } from '@/api/course'
import { getStoreLsit } from '@/api/store/store'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'User',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        beginDate: '',
        endDate: '',
        index: 0,
        size: 10,
        userName: null,
        time: null,
        storeId: null,
      },
      dataForm: {
        userName: '',
        storeName: '',
        appointmentTime: '',
        contact: '',
      },
      storeOptions: [],
      multipleSelection: [],
      dialogFormVisible: false,
    }
  },
  created() {
    this.getStoreLsit()
    this.getList()
  },
  methods: {
    sureContact(item, type) {
      sureCourseContact(item).then((res) => {
        this.getList()
        if (type == 2) {
          this.dialogFormVisible = false
        }
      })
    },
    getStoreLsit() {
      const params = {
        index: 0,
        size: 100,
        storeName: undefined,
      }
      getStoreLsit(params).then((res) => {
        this.storeOptions = res.data.data.content
      })
    },
    getList(e) {
      if (e && e.page) {
        this.listQuery.index = e.page - 1
      }
      this.listLoading = true
      getAppointment(this.listQuery)
        .then((response) => {
          this.list = response.data.data.content
          this.total = response.data.data.totalRecords
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.index = 0
      this.getList()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleDeleteAll() {
      // const idList = []
      // this.multipleSelection.forEach(item => {
      //   idList.push(item.teacherId)
      // })
      // deleteTeacher({ idList }).then(res => {
      //   this.$message({
      //     type: 'success',
      //     message: '删除成功!'
      //   })
      //   this.getList()
      // })
    },
    getDetail(item) {
      this.dialogFormVisible = true
      console.log(item)
      this.dataForm = Object.assign(this.dataForm, item)
    },
  },
}
</script>
